<template>
    <v-divider
        class="border-opacity-100"
        :thickness="4"
        color="info"
        style="margin-top: 10px"
    ></v-divider>
    <v-card
        color="#E8EAF6"
        style="padding: 0px"
    >
        <div
            class="container"
            style="margin-top: 5px"
        >
            <h4 class="title">transform：</h4>
        </div>
        <div style="margin: 5px 0 5px 0; display: flex">
            <h5 style="padding: 0 5px 0 15px; color: grey">rotateX:</h5>
            <v-slider
                style="margin: 0 10px 0 0"
                v-model="rotateX"
                max="360"
                step="1"
                thumb-color="black"
                hide-details
                thumb-label
            ></v-slider>
        </div>
        <div style="margin: 5px 0 5px 0; display: flex">
            <h5 style="padding: 0 5px 0 15px; color: grey">rotateY:</h5>
            <v-slider
                style="margin: 0 10px 0 0"
                v-model="rotateY"
                max="360"
                step="1"
                thumb-color="black"
                hide-details
                thumb-label
            ></v-slider>
        </div>
        <div style="margin: 5px 0 5px 0; display: flex">
            <h5 style="padding: 0 5px 0 15px; color: grey">rotateZ:</h5>
            <v-slider
                style="margin: 0 10px 0 0"
                v-model="rotateZ"
                max="360"
                step="1"
                thumb-color="black"
                hide-details
                thumb-label
            ></v-slider>
        </div>
    </v-card>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
export default {
    name: 'cornerArea',
    data() {
        return {
            designStore: useDesignStore(),
            rotateX: 0,
            rotateY: 0,
            rotateZ: 0
        }
    },
    methods: {
        handler(newValue, oldValue) {
            const transform =
                'rotateX(' +
                this.rotateX +
                'deg) ' +
                'rotateY(' +
                this.rotateY +
                'deg) ' +
                'rotateZ(' +
                this.rotateZ +
                'deg)'
            this.designStore.currentDomPointer.attr.style.transform = transform
            this.designStore.rerender()
        }
    },
    watch: {
        rotateX: ['handler'],
        rotateY: ['handler'],
        rotateZ: ['handler']
    }
}
</script>

<style>
.container {
    display: flex;
    justify-content: space-between;
}

.title {
    margin: 3px 0 3px 5px;
    color: grey;
    justify-content: flex-start;
}

.icons {
    justify-content: flex-end;
}
</style>
